<template>
  <view class="userInfo-container">
    <view class="userInfo-content">
      <view class="image-content">
        <image class="user-avatar" mode="aspectFill" :src="defaultAvatar"></image>
        <text class="user-nikeName">{{ userInfo.nickName }}</text>
        <text class="user-name">账号：{{ userInfo.userName }}</text>
      </view>
      <view class="userInfo-card px-14">
        <view class="userInfo-card-bg"></view>
        <view class="dept-card">
          <image class="userInfo-icon-img" mode="aspectFill" :src="deptIcon"></image>
          <view class="userInfo-card-info dept-card-info">
            <text class="userInfo-card-info-title dept-card-title">所在部门</text>
            <text class="userInfo-card-info-content dept-card-content" @click="openPopup('dept')">{{ deptGroup || '--' }}</text>
          </view>
        </view>
        <view class="role-card">
          <image class="userInfo-icon-img" mode="aspectFill" :src="roleIcon"></image>
          <view class="userInfo-card-info role-card-info">
            <text class="userInfo-card-info-title role-card-title">我的角色</text>
            <text class="userInfo-card-info-content role-card-content" @click="openPopup('role')">{{ roleGroup || '--' }}</text>
          </view>
        </view>
      </view>
      <view class="app-info px-14">
        <view class="app-info-main">
          <view class="app-info-item version-box">
            <image class="app-info-item-icon" mode="aspectFit" :src="versionIcon"></image>
            <text class="app-info-item-title">版本信息</text>
            <text class="app-info-item-btn">{{ appVersion }}</text>
          </view>
          <view class="app-info-item logout-box">
            <image class="app-info-item-icon" mode="aspectFit" :src="logoutIcon"></image>
            <text class="app-info-item-title">退出登录</text>
            <view class="app-info-item-btn" @click="logout">
              <image class="app-info-item-btn-icon" mode="aspectFit" :src="logoutBtnIcon"></image>
            </view>
          </view>
        </view>
      </view>

      <uni-popup ref="popup">
        <view class="userInfo-popup-content">
          <view class="userInfo-popup-content-close" @click="closePopup()"> <uni-icons type="close" size="20"></uni-icons></view>
          <view class="userInfo-popup-content-title">{{ popupType == 'dept' ? '所在部门' : '我的角色' }} </view>
          <view class="userInfo-popup-content-content">{{ popupContent }}</view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
  import defaultAvatar from '@/static/userInfo/default-avatar.png';
  import deptIcon from '@/static/userInfo/dept-icon.png';
  import roleIcon from '@/static/userInfo/role-icon.png';
  import versionIcon from '@/static/userInfo/version-icon.png';
  import logoutIcon from '@/static/userInfo/logout-icon.png';
  import logoutBtnIcon from '@/static/userInfo/logout-btn-icon.png';
  import { useUserStore } from '@/store/user';
  import { useAppStore } from '@/store/app';
  import { isObject } from '/utils/utils';

  export default {
    data() {
      return {
        defaultAvatar,
        deptIcon,
        roleIcon,
        versionIcon,
        logoutIcon,
        logoutBtnIcon,
        popupType: '',
      };
    },
    computed: {
      userInfo() {
        const userStore = useUserStore();
        return userStore.userInfo;
      },
      deptGroup() {
        if (this.userInfo?.dept && isObject(this.userInfo?.dept)) {
          return this.userInfo.dept?.deptName;
        }
        if (Array.isArray(this.userInfo?.dept)) {
          return this.userInfo?.dept.map(item => item.deptName).join('、');
        }
        return '';
      },
      roleGroup() {
        if (Array.isArray(this.userInfo?.userRoles)) {
          return this.userInfo?.userRoles.map(item => item.roleName).join('、');
        }
        return '';
      },
      popupContent() {
        switch (this.popupType) {
          case 'dept':
            return this.deptGroup;
          case 'role':
            return this.roleGroup;
          default:
            return '';
        }
      },
      appVersion(){
        const appStore = useAppStore();
        return appStore.version
      }
    },
    methods: {
      openPopup(type) {
        this.popupType = type;
        if (this.popupContent) {
          this.$refs.popup.open('center');
        }
      },
      closePopup() {
        this.$refs.popup.close();
      },
      async logout() {
        uni.showModal({
          title: '确认',
          content: `确定退出登录吗？`,
          success: res => {
            if (res.confirm) {
              uni.showLoading({
                title: '退出中...',
                mask: true
              });

              const userStore = useUserStore();
              userStore.logOut().finally(() => {
                userStore.loginInvalid();
                uni.hideLoading();
              });
            }
          }
        });
      }
    },
    onShow() {
      const userStore = useUserStore();
      if (!userStore.userInfo?.userId) {
        uni.showLoading({
          title: '获取用户信息...',
          mask: true
        });
        userStore.getUserInfo();

        setTimeout(() => {
          uni.hideLoading();
        }, 800);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .userInfo-container {
    padding-top: var(--status-bar-height);
    background-color: #f0f2f4;

    background-image: url('@/static/userInfo/user-avatar-bg.png');
    background-repeat: no-repeat;
    background-position: top;

    /* #ifdef H5 */
    background-position-y: -50rpx * 1.4;
    background-size: 100% auto;
    /* #endif */

    .userInfo-content {
      height: calc(100vh - var(--status-bar-height));
      overflow: auto;

      .image-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 80rpx * 1.4;
        padding-bottom: 20rpx * 2;

        .user-avatar {
          width: 74rpx * 2;
          height: 74rpx * 2;
          border-radius: 50%;
          overflow: hidden;
          display: block;
          position: relative;
          border: 10rpx solid #fff;
          margin-bottom: 22rpx;
        }
        .user-nikeName {
          font-size: 18rpx * 2;
          color: #222222;
          line-height: 1.1;
          font-weight: bold;
          margin-bottom: 14rpx * 2;
        }
        .user-name {
          font-size: 13rpx * 2;
          color: #67788e;
          line-height: 1.1;
          font-weight: bold;
          margin-bottom: 14rpx * 2;
        }
      }
      .userInfo-card {
        display: flex;
        gap: 12rpx * 2;
        position: relative;
        padding-top: 40rpx * 2;
        .dept-card,
        .role-card {
          flex: 1;
          padding: 14rpx * 1.8 8rpx * 1.2;
          min-height: 62rpx;
          border-radius: 8px;
          background-color: rgba(255, 255, 255, 0.6);
          display: flex;
          align-items: center;
          gap: 10rpx * 1.3;
          position: relative;
          z-index: 2;
          overflow: hidden;
          .userInfo-icon-img {
            width: 37rpx * 2;
            height: 29rpx * 2;
            flex: none;
          }
          .userInfo-card-info {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .userInfo-card-info-title {
              color: #000000;
              font-size: 14rpx * 2;
              line-height: 1.1;
              font-weight: bold;
              margin-bottom: 8rpx * 2;
            }
            .userInfo-card-info-content {
              color: #666666;
              font-size: 13rpx * 2;
              line-height: 1.1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        .userInfo-card-bg {
          position: absolute;
          z-index: 1;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 80%;
          height: 56rpx * 2;
          background-image: url('@/static/userInfo/userInfo-card-bg.png');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
      .app-info {
        margin-top: 15rpx * 2;
        .app-info-main {
          display: flex;
          flex-direction: column;
          gap: 24rpx * 2;
          border-radius: 8px;
          background-color: rgba(255, 255, 255, 0.6);
          padding: 23rpx * 2 17rpx * 2;
          .app-info-item {
            display: flex;
            align-items: center;
            .app-info-item-icon {
              width: 16rpx * 2;
              height: 16rpx * 2;
              margin-right: 12rpx * 2;
            }
            .app-info-item-title {
              color: #000000;
              font-size: 14rpx * 2;
              line-height: 1.1;
            }
            .app-info-item-btn {
              margin-left: auto;
              color: #777777;
              font-size: 13rpx * 2;
              line-height: 1.1;
              .app-info-item-btn-icon {
                width: 21rpx * 2;
                height: 21rpx * 2;
              }
            }
          }
        }
      }
    }
  }
</style>

<style lang="scss">
  .userInfo-popup-content {
    padding: 26rpx;
    width: 60vw;
    overflow-x: hidden;
    border-radius: 6rpx;
    background-color: #fff;
    position: relative;

    .userInfo-popup-content-close {
      position: absolute;
      top: 14rpx;
      right: 14rpx;
    }

    .userInfo-popup-content-title {
      color: #000000;
      font-size: 14rpx * 2;
      line-height: 1.1;
      font-weight: bold;
      margin-bottom: 12rpx * 2;
    }
    .userInfo-popup-content-content {
      color: #666666;
      font-size: 13rpx * 2;
      line-height: 1.1;
      max-height: 40vh;
      overflow-y: auto;
    }
  }
</style>
